<template>
  <div class="video-task" v-loading="loading">
    <div style="padding-left: 25%; width: fit-content">
      <div class="title">{{ task.index }}、 请你回答以下问题：</div>
      <div class="info">1.电影片段包含哪些情节？</div>
      <div class="info">2.电影片段是否引发了你的情绪体验，是怎样的情绪体验？</div>
      <div class="tips">提示：请您畅所欲言，表达自己真实的想法和情感体验。</div>
    </div>

    <div class="video-content" >
      <video :src="task.src" controls autoplay ref="videoRef" controlsList="" allowfullscreen></video>
      <!-- 隐藏的全屏按钮 -->
      <button ref="hiddenFullscreenBtn" @click="triggerFullscreen" style="display: none;">隐藏全屏按钮</button>
      <el-button type="primary" @click="showRecording" :disabled="!videoEnded">说出我的感受</el-button>
    </div>

    <TaskProcess/>



    <!--回答弹窗-->
    <RecordingModel
        v-model="showRecordingModel"
        :video-name="generateVideoName() + '_回答观影任务'"
        uploadFolder="recording"
        @confirm="showEvaluationModel = true"
    />

    <ReportModel
        v-model="showEvaluationModel"
        :key="Date.now()"
        :jsonName="generateVideoName() + '_回答观影任务表单'"
        uploadFolder="task-json"
        :task="props.task"
    />
  </div>
</template>
<script setup>
import {defineProps, defineEmits, ref, onMounted, onUnmounted, computed} from 'vue'
import {ElMessage} from "element-plus"
import useUserStore from "@/stores/user.js"
import RecordingModel from "@/views/task/component/Report/RecordingModel.vue";
import ReportModel from "@/views/task/component/Report/ReportModel.vue";

import TaskProcess from "@/views/task/component/TaskProcess.vue";
import {useVideoRecorder} from '@/hooks/useVideoRecorder'

const userStore = useUserStore()
const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})
const loading = ref(false)
// 视频是否播放完毕
const videoEnded = ref(false)

// 生成视频文件名
const generateVideoName = () => {
  const timestamp = Date.now();
  return `${userStore.userInfo.data.account}_${props.task.id}_${timestamp}`;
};


// 使用视频录制hooks
const {startRecording, stopAndUpload} = useVideoRecorder({
  uploadFolder: 'wacheVideo',
  videoName: generateVideoName() + '_观看视频'
});


//评价弹窗
const showEvaluationModel = ref(false)

//回答录音弹窗
const showRecordingModel = ref(false)
const showRecording = async () => {
  // 暂停视频播放
  if (videoRef.value && !videoRef.value.paused) {
    videoRef.value.pause();
  }
  try {
    loading.value = true
    await stopAndUpload()
    showRecordingModel.value = true
  } catch (e) {
    ElMessage.error(e.message)
  }finally {
    loading.value = false
  }


}


const videoRef = ref(null)
const hiddenFullscreenBtn = ref(null)

// 触发全屏播放
const triggerFullscreen = () => {
  if (videoRef.value) {
    // 请求全屏
    if (videoRef.value.requestFullscreen) {
      videoRef.value.requestFullscreen()
    } else if (videoRef.value.webkitRequestFullscreen) {
      videoRef.value.webkitRequestFullscreen()
    } else if (videoRef.value.mozRequestFullScreen) {
      videoRef.value.mozRequestFullScreen()
    } else if (videoRef.value.msRequestFullscreen) {
      videoRef.value.msRequestFullscreen()
    }
  }
}

// 视频播放结束事件处理
const handleVideoEnded = () => {
  videoEnded.value = true
}





// 组件挂载后设置视频监听器
onMounted(async () => {
  await startRecording()
  
  // 等待视频元素加载完成后触发全屏
  if (videoRef.value) {
    videoRef.value.addEventListener('loadeddata', () => {
      // 延迟触发全屏按钮点击，确保视频已准备好
      setTimeout(() => {
        if (hiddenFullscreenBtn.value) {
          hiddenFullscreenBtn.value.click()
        }
      }, 500)
    })
    
    // 监听视频播放结束事件
    videoRef.value.addEventListener('ended', handleVideoEnded)
  }
})

// 组件卸载时清理事件监听器
onUnmounted(() => {
  if (videoRef.value) {
    videoRef.value.removeEventListener('ended', handleVideoEnded)
    videoRef.value.removeEventListener('loadeddata', () => {})
  }
})
</script>
<style scoped lang="scss">
.video-task {
  padding-top: 30px;
  height: 100%;
  position: relative;
  .title {
    font-size: 24px;
    line-height: 40px;
    margin-bottom: 20px;
    width: fit-content;
  }

  .info {
    font-size: 18px;
    margin-bottom: 20px;
    width: fit-content;
  }

  .tips {
    font-size: 14px;
  }
}

.video-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  video {
    margin-bottom: 23px;
    margin-top: 40px;
    width: 60%;
    aspect-ratio: 21/9;
  }
}
</style>
